<template>
    <view class="container">
        <block v-if="cartlist.length>0">
            <view class="cartmain">
                <block v-for="(item, index) in cartlist" :key="item.bid">
                    <view class="item">
                        <view class="btitle">
                            <view @tap.stop="changeradio" :data-index="index" class="radio"
                                  :style="item.checked ? 'background:'+t('color1')+';border:0' : ''">
                                <image class="radio-img" src="/static/img/checkd.png"/>
                            </view>
                            <view class="btitle-name" @tap="goto"
                                  :data-url="item.bid==0?indexurl:'/pagesExt/business/index?id=' + item.business.id">
                                {{ item.business.name }}
                            </view>
                            <view class="flex1"></view>
                            <view class="btitle-del" @tap="cartdeleteb" :data-bid="item.bid">
                                <image class="img" src="/static/img/del.png"/>
                                <text style="margin-left:10rpx">删除</text>
                            </view>
                        </view>
                        <view class="content" v-for="(item2,index2) in item.prolist" @tap="goto"
                              :data-url="'/pages/shop/product?id=' + item2.product.id" :key="index2">
                            <view @tap.stop="changeradio2" :data-index="index" :data-index2="index2" class="radio"
                                  :style="item2.checked ? 'background:'+t('color1')+';border:0' : ''">
                                <image class="radio-img" src="/static/img/checkd.png"/>
                            </view>
                            <view class="proinfo" :style="(item.prolist).length == index2+1 ? 'border:0' : ''">
                                <image :src="item2.guige.pic?item2.guige.pic:item2.product.pic" class="img"/>
                                <view class="detail">
                                    <view class="title">
                                        <text>{{ item2.product.name }}</text>
                                    </view>
                                    <view class="desc">
                                        <text>{{ item2.guige.name }}</text>
                                    </view>
                                    <view class="desc" v-if="item2.product.product_type==3">
                                        <text>手工费:￥{{ item2.guige.hand_fee }}</text>
                                    </view>
                                    <view class="price" :style="{color:t('color1')}">
                                        <view
                                            v-if="!isNull(item2.product.service_fee_switch) && !isNull(item2.guige.service_fee) && item2.product.service_fee_switch == 1 && item2.guige.service_fee > 0"
                                            style="line-height: initial;font-size: 26rpx;">
                                            <text style="display: block;">
                                                <text style="font-size:24rpx">￥</text>
                                                {{ item2.guige.sell_price }}
                                            </text>
                                            <text style="display: block;">
                                                +{{ item2.guige.service_fee }}{{ t('服务费') }}
                                            </text>
                                        </view>
                                        <view v-else>
                                            <text style="font-size:24rpx">￥</text>
                                            {{ item2.guige.sell_price }}
                                        </view>
                                    
                                    </view>
                                    
                                    <view class="addnum">
                                        <view class="minus" @tap.stop="gwcminus" :data-index="index"
                                              :data-index2="index2" :data-cartid="item2.id" :data-num="item2.num"
                                              :data-limit_start="item2.product.limit_start"
                                              :data-limit_start_guige="item2.guige.limit_start">
                                            <image class="img" src="/static/img/cart-minus.png"/>
                                        </view>
                                        <input class="input" @tap.stop="" type="number" :value="item2.num"
                                               @blur="gwcinput" :data-max="item2.guige.store_nums"
                                               :data-index="index" :data-index2="index2" :data-cartid="item2.id"
                                               :data-num="item2.num" :data-limit_start="item2.product.limit_start"
                                               :data-limit_start_guige="item2.guige.limit_start"></input>
                                        <view class="plus" @tap.stop="gwcplus" :data-index="index"
                                              :data-index2="index2" :data-max="item2.guige.store_nums"
                                              :data-num="item2.num" :data-cartid="item2.id"
                                              :data-limit_start="item2.product.limit_start"
                                              :data-limit_start_guige="item2.guige.limit_start">
                                            <image class="img" src="/static/img/cart-plus.png"/>
                                        </view>
                                    </view>
                                </view>
                                <view class="prodel" @tap.stop="cartdelete" :data-cartid="item2.id">
                                    <image class="prodel-img" src="/static/img/del.png"/>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </block>
    </view>
</template>

<script>
    const app = getApp();
    export default {
        data() {
            return {
                cartlist: []
            };
        },
        onShow() {
            app.post("ApiShop/getShopCuxiaoList", {aid: app.globalData.aid}, function (res) {
                console.log(res);
            })
        },
        methods: {}
    }
</script>

<style lang="scss">
    .public_color {
        color: #c3a769;
    }
    
    .container {
        height: 100%
    }
    
    .cartmain .item {
        width: 94%;
        margin: 20rpx 3%;
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx 3%;
    }
    
    .cartmain .item .radio {
        flex-shrink: 0;
        width: 32rpx;
        height: 32rpx;
        background: #FFFFFF;
        border: 2rpx solid #BFBFBF;
        border-radius: 50%;
        margin-right: 30rpx
    }
    
    .cartmain .item .radio .radio-img {
        width: 100%;
        height: 100%
    }
    
    .cartmain .item .btitle {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 30rpx
    }
    
    .cartmain .item .btitle-name {
        color: #222222;
        font-weight: bold;
        font-size: 28rpx;
    }
    
    .cartmain .item .btitle-del {
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 24rpx;
    }
    
    .cartmain .item .btitle-del .img {
        width: 24rpx;
        height: 24rpx
    }
    
    .cartmain .item .content {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .cartmain .item .content .proinfo {
        flex: 1;
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #f2f2f2
    }
    
    .cartmain .item .content .proinfo .img {
        width: 176rpx;
        height: 176rpx;
    }
    
    .cartmain .item .content .detail {
        flex: 1;
        margin-left: 20rpx;
        height: 176rpx;
        position: relative;
    }
    
    .cartmain .item .content .detail .title {
        color: #222222;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 34rpx;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 68rpx
    }
    
    .cartmain .item .content .detail .desc {
        margin-top: 0rpx;
        height: auto;
        color: #999;
        overflow: hidden;
        font-size: 20rpx;
    }
    
    .cartmain .item .content .detail .desc text {
        width: 350rpx;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    
    .cartmain .item .content .prodel {
        width: 24rpx;
        height: 24rpx;
        position: absolute;
        top: 90rpx;
        right: 0
    }
    
    .cartmain .item .content .prodel-img {
        width: 100%;
        height: 100%
    }
    
    .cartmain .item .content .price {
        margin-top: 10rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 32rpx;
        font-weight: bold;
        display: flex;
        align-items: center
    }
    
    .cartmain .item .content .addnum {
        position: absolute;
        right: 0;
        bottom: 0rpx;
        font-size: 30rpx;
        color: #666;
        width: auto;
        display: flex;
        align-items: center
    }
    
    .cartmain .item .content .addnum .plus {
        width: 65rpx;
        height: 48rpx;
        background: #F6F8F7;
        display: flex;
        align-items: center;
        justify-content: center
    }
    
    .cartmain .item .content .addnum .minus {
        width: 65rpx;
        height: 48rpx;
        background: #F6F8F7;
        display: flex;
        align-items: center;
        justify-content: center
    }
    
    .cartmain .item .content .addnum .img {
        width: 24rpx;
        height: 24rpx
    }
    
    .cartmain .item .content .addnum .i {
        padding: 0 20rpx;
        color: #2B2B2B;
        font-weight: bold;
        font-size: 24rpx
    }
    
    .cartmain .item .content .addnum .input {
        flex: 1;
        width: 50rpx;
        border: 0;
        text-align: center;
        color: #2B2B2B;
        font-size: 24rpx;
        margin: 0 15rpx;
    }
    
    .cartmain .item .bottom {
        width: 94%;
        margin: 0 3%;
        border-top: 1px #e5e5e5 solid;
        padding: 10rpx 0px;
        overflow: hidden;
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: flex-end
    }
    
    .cartmain .item .bottom .f1 {
        display: flex;
        align-items: center;
        color: #333
    }
    
    .cartmain .item .bottom .f1 image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 4px;
        margin-right: 4px
    }
    
    .cartmain .item .bottom .op {
        border: 1px #ff4246 solid;
        border-radius: 10rpx;
        color: #ff4246;
        padding: 0 10rpx;
        height: 46rpx;
        line-height: 46rpx;
        margin-left: 10rpx;
    }
</style>
